<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>for全选</title>
	<style type="text/css">
		*{
    		margin: 0;
    		padding: 0;
    	}
	    #box{
	    	width: 250px;
	    	height: 260px;
	    	position: relative;
	    	left: 50%;
	    	top: 10%;
	    	margin-top:50px;
	    	margin-left:-125px;
	    }
        ul{ 
            width: 250px;
            border: 3px #ccc solid;
            padding: 5px;
            margin: 0;
        }
        li{ 
            list-style: none;
            height: 30px;
            line-height: 30px;
            width: 250px;
            font-size: 12px;
        }
        li span{
            position: absolute;
            text-align:right;
            left:190px;
        }        
	</style>
	<script type="text/javascript">
		window.onload=function(){
			
			//思路：1）获取元素  2）设置隔行变色  3）设置鼠标滑过，移走的背景色  4）判断复选框选中状态，设置选中时的背景色  5）（判断）设置全部选中时的背景色

			var oBox=document.getElementById("box");
			var oSelect=document.getElementById("select");
			var oAllselect=document.getElementById("allselect");
			var aLi=oSelect.getElementsByTagName("li");
			var oInput=oSelect.getElementsByTagName("input");
			var clickNum = 0;
			//隔行变色  封装函数
			function Se(){
				for(var i=0;i<aLi.length;i++){
					if (i % 2 == 0) {
						 aLi[i].style.background = "#eee"
					} else {
						 aLi[i].style.background = "#fff"
					}
				}
			}
			Se();

			//遍历所有li，input与li索引相同
			for(var i=0;i<aLi.length;i++){
				aLi[i].index = i;
				aLi[i].onmouseover=function(){
					//遍历li  记得遍历，保证移到其他位置时颜色重置
					for(var i=0;i<aLi.length;i++){
						if(oInput[this.index].checked==true){
							
							this.style.background="blue"; 	
						}else{
							//oInput没选中且鼠标移上时aLi的颜色
							this.style.background="blue";
							//只要有一个oInput未选中，全选框不选中
							oAllselect.checked = false;
						}
					}																       			
				}					
				aLi[i].onmouseout=function(){										
					for (var i = 0; i < aLi.length; i++) {
						if(oInput[this.index].checked==true){
							this.style.background="blue"; 	
						}else{
							if(this.index%2==0){
								this.style.background = "#eee";
							}else{
								this.style.background = "#fff";
							}
						}
					};	
								 
				}				
				oInput[i].onclick = function(){
					if(this.checked==true){
						clickNum++;
						
						if(clickNum==aLi.length){
							oAllselect.checked = true
						}
					}else{
						clickNum--;
						
						oAllselect.checked = false;
					}
				}
				oAllselect.onclick = function(){
					if(this.checked==true){
						for (var i = 0; i < aLi.length; i++) {
							oInput[i].checked=true;
							aLi[i].style.background="blue";
						};
					}else{
						for (var i = 0; i < aLi.length; i++) {
							oInput[i].checked=false;
							Se();
						};
					}
				}

        	}
        	
		
		}
   		
		

	</script>
</head>
<body>
    <div id="box">
    	<ul id="select">
        <li><input type="checkbox">私奔 <span>梁博</span></li>
        <li><input type="checkbox">北京 <span>梁博·黄勇</span></li>
        <li><input type="checkbox">我爱你中国 <span>梁博</span></li>
        <li><input type="checkbox">花火 <span>梁博</span></li>
        <li><input type="checkbox">回来 <span>梁博</span></li>
        <li><input type="checkbox">爱要有你才完美 <span>梁博·那英</span></li>
    </ul>     
    <input type="checkbox" id="allselect">全选
    </div>     

</body>
</html>